<template>
  <app-view name="feature">
    <h1>Electron SSR客户端</h1>
    <i-row type="flex" :gutter="24" class="mt-64">
      <i-col class="col flex flex-column flex-ai-center flex-jc-center">
        <svg viewBox="0 0 1024 1024" width="40" height="40">
          <path :class="$style.svg" d="M843.691401 837.737806l39.022759 0 0 34.287921-39.022759 0 0-34.287921Z"></path>
          <path :class="$style.svg" d="M121.773438 803.449885l780.452101 0 0 17.144472-780.452101 0 0-17.144472Z"></path>
          <path :class="$style.svg" d="M63.240323 752.017492l0 171.440627 897.519354 0L960.759677 752.017492 63.240323 752.017492zM921.736918 889.170199 102.263082 889.170199 102.263082 786.305413 921.736918 786.305413 921.736918 889.170199z"></path>
          <path :class="$style.svg" d="M920.040277 752.017492l40.7194 0L882.71416 100.540857 141.284817 100.540857 63.240323 752.017492l40.7194 0 76.348875-617.187691 663.383826 0L920.040277 752.017492z"></path>
          <path :class="$style.svg" d="M414.443104 271.982508c-58.534138 0-97.556896 17.144472-97.556896 17.144472l-19.511379 137.152706c0 0 39.022759-17.144472 97.556896-17.144472s97.556896 17.144472 97.556896 17.144472l19.511379-137.152706C512 289.125957 472.977241 271.982508 414.443104 271.982508zM460.560444 391.990742c0 0-24.832572-9.524934-62.080917-9.524934-37.248346 0-62.080917 9.524934-62.080917 9.524934l12.415774-76.196403c0 0 24.832572-9.524934 62.080917-9.524934 37.248346 0 62.080917 9.524934 62.080917 9.524934L460.560444 391.990742z"></path>
          <path :class="$style.svg" d="M297.375851 460.567607l-19.511379 137.152706c0 0 39.022759-17.144472 97.556896-17.144472 58.534138 0 97.556896 17.144472 97.556896 17.144472l19.511379-137.152706c0 0-39.022759-17.144472-97.556896-17.144472S297.375851 460.567607 297.375851 460.567607zM441.050088 563.432393c0 0-24.832572-9.524934-62.080917-9.524934-37.248346 0-62.080917 9.524934-62.080917 9.524934l12.416797-76.196403c0 0 24.832572-9.524934 62.080917-9.524934s62.080917 9.524934 62.080917 9.524934L441.050088 563.432393z"></path>
          <path :class="$style.svg" d="M648.578632 306.270429c-58.534138 0-97.556896-17.144472-97.556896-17.144472l-19.511379 137.152706c0 0 39.022759 17.144472 97.556896 17.144472 58.534138 0 97.556896-17.144472 97.556896-17.144472l19.511379-137.152706C746.135528 289.125957 707.11277 306.270429 648.578632 306.270429zM694.696995 399.61028c0 0-24.832572 9.524934-62.080917 9.524934-37.248346 0-62.080917-9.524934-62.080917-9.524934l12.416797-76.196403c0 0 24.832572 9.524934 62.080917 9.524934 37.249369 0 62.080917-9.524934 62.080917-9.524934L694.696995 399.61028z"></path>
          <path :class="$style.svg" d="M531.511379 460.567607l-19.511379 137.152706c0 0 39.022759 17.144472 97.556896 17.144472s97.556896-17.144472 97.556896-17.144472l19.511379-137.152706c0 0-39.022759 17.144472-97.556896 17.144472C570.534138 477.712079 531.511379 460.567607 531.511379 460.567607zM675.185616 571.051931c0 0-24.832572 9.524934-62.080917 9.524934-37.249369 0-62.080917-9.524934-62.080917-9.524934l12.415774-76.196403c0 0 24.832572 9.524934 62.080917 9.524934 37.248346 0 62.080917-9.524934 62.080917-9.524934L675.185616 571.051931z"></path>
        </svg>
        <b class="font-18 my-1">跨平台</b>
        <p>支持Windows、MacOs、Linux系统</p>
      </i-col>
      <i-col class="col flex flex-column flex-ai-center flex-jc-center">
        <svg viewBox="0 0 1024 1024" width="40" height="40">
          <path :class="$style.svg" d="M805.724695 239.71971c-1.843998-1.459235-4.366448-1.717108-6.42227-0.630357L219.441874 535.613814c-2.158153 1.108241-3.430122 3.396353-3.242857 5.812379 0.212848 2.413979 1.845021 4.468778 4.155646 5.205559l194.10379 61.698201c2.041496 0.64059 4.247744 0.161682 5.813403-1.26276l268.52271-241.933121L474.394521 618.915032c-1.297552 1.528819-1.739621 3.617387-1.167592 5.54325 0.571005 1.926886 2.065032 3.444449 3.988848 4.027733l215.384465 65.608254c0.556679 0.174985 1.14508 0.25685 1.727341 0.25685 1.02433 0 2.051729-0.26913 2.964518-0.783853 1.422396-0.815575 2.462075-2.180666 2.846838-3.781116L807.822472 245.822708C808.374034 243.547899 807.553343 241.167688 805.724695 239.71971L805.724695 239.71971z"></path>
          <path :class="$style.svg" d="M540.235065 675.605172l-59.528791-18.313088c-1.798972-0.584308-3.780093-0.233314-5.298679 0.89744-1.529843 1.134847-2.428306 2.919493-2.428306 4.810562l0 112.352881c0 2.662643 1.752924 4.995781 4.317329 5.741771 0.538259 0.152473 1.099031 0.234337 1.661849 0.234337 2.006703 0 3.931542-1.01512 5.042853-2.7793l59.522652-94.037746c1.003863-1.576915 1.214664-3.526313 0.561795-5.26491C543.44313 677.497265 542.018687 676.154687 540.235065 675.605172L540.235065 675.605172z"></path>
        </svg>
        <b class="font-18 my-1">功能齐全</b>
        <p>支持多种实用功能</p>
      </i-col>
      <i-col class="col flex flex-column flex-ai-center flex-jc-center">
        <svg viewBox="0 0 1024 1024" width="40" height="40">
          <path :class="$style.svg" d="M877.714286 512q0 143.433143-83.712 258.011429t-216.283429 158.573714q-15.433143 2.852571-22.564571-3.986286t-7.131429-17.152l0-120.576q0-55.442286-29.696-81.152 32.585143-3.437714 58.587429-10.276571t53.723429-22.272 46.299429-37.997714 30.281143-60.013714 11.702857-86.016q0-69.156571-45.129143-117.723429 21.138286-52.004571-4.571429-116.553143-16.018286-5.156571-46.299429 6.290286t-52.553143 25.161143l-21.723429 13.714286q-53.138286-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.725714-22.016-49.152-7.716571q-25.161143 64.585143-3.986286 116.553143-45.129143 48.566857-45.129143 117.723429 0 48.566857 11.702857 85.723429t29.988571 60.013714 46.006857 38.290286 53.723429 22.272 58.587429 10.276571q-22.857143 20.553143-28.013714 58.843429-11.995429 5.705143-25.709714 8.557714t-32.585143 2.852571-37.412571-12.288-31.707429-35.730286q-10.861714-18.285714-27.721143-29.696t-28.269714-13.714286l-11.446857-1.718857q-11.995429 0-16.566857 2.56t-2.852571 6.582857 5.156571 8.009143 7.424 6.838857l3.986286 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.147429l5.705143 13.129143q7.424 21.723429 25.161143 35.145143t38.290286 17.152 39.716571 3.986286 31.707429-2.011429l13.129143-2.304q0 21.723429 0.292571 50.870857t0.292571 30.866286q0 10.276571-7.424 17.152t-22.857143 3.986286q-132.571429-43.995429-216.283429-158.573714t-83.712-258.011429q0-119.442286 58.843429-220.269714t159.707429-159.707429 220.269714-58.843429 220.269714 58.843429 159.707429 159.707429 58.843429 220.269714z"></path>
        </svg>
        <b class="font-18 my-1">开源</b>
        <p>ssr和electron-ssr源代码均开放</p>
      </i-col>
    </i-row>
    <div class="flex flex-ai-center mt-64">
      <i-checkbox v-model="autoDownload" @on-change="updateAutoDownload">自动下载SSR</i-checkbox>
      <i-tooltip placement="top" content="勾选上后将自动下载ssr-python" style="margin-top:2px">
        <i-icon color="#495060" type="help-circled"></i-icon>
      </i-tooltip>
    </div>
    <i-button type="primary" class="w-6r mt-1" @click="done">知道了</i-button>
  </app-view>
</template>
<script>
import { STORE_KEY_FEATURE, STORE_KEY_AUTO_DOWNLOAD } from '../constants'
export default {
  data () {
    return {
      autoDownload: true
    }
  },
  methods: {
    updateAutoDownload (v) {
      localStorage.setItem(STORE_KEY_AUTO_DOWNLOAD, v ? '1' : '0')
    },
    done () {
      localStorage.setItem(STORE_KEY_FEATURE, 'read')
      this.$emit('finished')
    }
  },
  created () {
    this.updateAutoDownload(true)
  }
}
</script>

<style lang="stylus" module>
@import '../assets/styles/variable'
.svg
  fill $color-primary
</style>
<style lang="stylus" scoped>
.mt-64
  margin-top 64px
.col
  width 240px
</style>
